<template>
  <div class="dialogs-container">
    <el-dialog
      center
      title="调拨订单"
      :visible.sync="dialogVisible"
      width="70%"
      top="4%"
      :close-on-click-modal="false"
    >
      <!-- 第一行，信息 -->
      <el-card shadow="always">
        <el-form
          :inline="true"
          class="demo-form-inline"
          label-width="100px"
          size="small"
        >
          <el-form-item label="订单编号" style="margin-bottom: 5px">
            <el-input v-model="id" disabled style="width: 200px" />
          </el-form-item>
          <el-form-item label="订单日期" style="margin-bottom: 5px">
            <el-date-picker
              v-model="date"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              :disabled="!flag"
              style="width: 200px"
            />
          </el-form-item>

          <el-form-item style="margin: 0 0 0px 30px">
            <el-button
              v-if="flag"
              type="success"
              :disabled="outList.length !== 3"
              @click="addItem"
            >添加货物</el-button>
          </el-form-item>
        </el-form>

        <!-- 调入、调出位置 -->
        <el-form
          :inline="true"
          class="demo-form-inline"
          label-width="100px"
          size="small"
        >
          <el-form-item label="调出位置" style="margin-bottom: 5px">
            <el-cascader
              v-model="outList"
              placeholder="请选择"
              :options="options"
              filterable
              style="width: 200px"
              :disabled="!flag"
            />
          </el-form-item>
          <el-form-item label="调入位置" style="margin-bottom: 5px">
            <el-cascader
              v-model="inList"
              :options="options"
              placeholder="请选择"
              filterable
              style="width: 200px"
              :disabled="!flag"
            />
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 第二行，表格详情 -->
      <el-card shadow="always" style="margin-top: 5px">
        <el-table
          ref="multipleTable"
          size="small"
          :data="transfers"
          tooltip-effect="dark"
          style="width: 100%"
          height="200px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            :selectable="check"
          />
          <el-table-column prop="id" label="编号" width="130" align="center" />
          <el-table-column
            prop="goodsName"
            label="货物名称"
            width="150"
            align="center"
          />
          <el-table-column
            prop="brandName"
            label="品牌"
            width="130"
            align="center"
          />
          <el-table-column
            prop="unit"
            label="单位"
            width="130"
            align="center"
          />
          <el-table-column
            label="状态"
            align="center"
          ><template slot-scope="{ row }">
            <el-tag
              effect="dark"
              :type="row.flag === 0 ? 'warning' : 'success'"
            >{{ row.flag === 0 ? "待调拨" : "已调拨" }}</el-tag>
          </template></el-table-column>
        </el-table>
      </el-card>

      <!-- 第三行，页脚插槽 -->
      <span slot="footer" class="dialog-footer">
        <el-button
          v-show="multipleSelection.length !== 0"
          size="small"
          type="primary"
          @click="open"
        >批量调拨</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialogs',
  data() {
    return {
      // 弹窗显示与隐藏
      dialogVisible: false,
      // 查看|添加模式标记
      flag: '',
      // 订单编号
      id: '',
      // 订单日期
      date: new Date(),
      // 订单信息
      transfers: [],
      // 仓库信息
      options: [],
      // 调出
      outList: [],
      // 调入
      inList: [],
      // 表格中被选中的行
      multipleSelection: []
    }
  },
  mounted() {
    this.getWarehouse()
  },
  methods: {
    // 切换选中状态
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取仓库信息
    async getWarehouse() {
      const response = await this.$API.transfer.warehouse()
      if (response.code === 200) {
        this.options = response.data
      } else {
        this.$message.error(response.msg)
      }
    },
    // 检查改行是否可以被选中
    check(row, index) {
      return row.flag === 0
    },
    // 弹框确认
    open() {
      this.$confirm('是否确认将选中的货物调拨?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.modify()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '调拨失败！'
        })
      })
    },
    // 获取调拨货物信息
    async getTransfer(id) {
      const response = await this.$API.transfer.getTransfer(id)
      if (response.code === 200) {
        this.transfers = response.data
      } else {
        this.$message.error(response.msg)
      }
    },
    // 批量调拨
    async modify() {
      const response = await this.$API.transfer.modify(this.id, this.multipleSelection)
      if (response.code === 200) {
        this.$message.success(response.msg)
        // 关闭所有弹窗
        this.dialogVisible = false
        // 重新拉取数据
        this.$emit('get')
      } else {
        this.$message.error(response.msg)
      }
    }
  }
}
</script>

<style>
.el-form-item {
  margin-bottom: 22px;
}
</style>
